<template>
    <Card dis-hover :bordered="false">
        <Row :gutter="8" class="ivu-mb-8">
            <!-- :options="options" -->
            <Col>
            <Select v-model="params.project_id" v-width="200" placeholder="请选择项目">
                <Option v-for="item in projectList" :value="item.project_id" :key="item.project_id">{{ item.name }}</Option>
            </Select>
          </Col>
            <Col>
            <Input v-model="params.ip" placeholder="请输入IP段后进行查询" clearable></Input>
          </Col>
            <Col><Button type="primary" @click="changeSearch()" >查询</Button></Col>
        </Row>
        <template>
            <Table :columns="columns" :data="data" border  max-height="600"></Table>
        </template>
    </Card>
</template>
<script>
    import { ipSearch } from '@/api/hqapi';
    export default {
        data(){
            return {
                params: { project_id: '',ip: ''},
                projectList: [],
                data: [],
                columns: [
                    {
                        title: '易聊-进线IP段',
                        key: 'ip',
                        align: 'center',
                        minWidth: 150,
                        fixed: 'left',
                    },
                    {
                        title: '周对话情况',
                        key: 'name',
                        align: 'center',
                        width: 200,
                        children: [
                            {
                                title: '有效',
                                key: 'this_week_valid',
                                align: 'center',
                                width: 140,
                            },
                            {
                                title: '无效',
                                key: 'this_week_invalid',
                                align: 'center',
                                width: 140,
                            },
                            {
                                title: '掉线骚扰',
                                key: 'this_week_disconnect',
                                align: 'center',
                                width: 140,
                            },
                            {
                                title: '未开口',
                                key: 'this_week_no_send',
                                align: 'center',
                                width: 140,
                            },
                            {
                                title: '留电量',
                                key: 'this_week_ld',
                                align: 'center',
                                width: 140,
                            },
                        ]
                    },
                    {
                        title: '日对话情况',
                        key: 'name',
                        align: 'center',
                        width: 200,
                        children: [
                            {
                                title: '有效',
                                key: 'today_valid',
                                align: 'center',
                                width: 140,
                            },
                            {
                                title: '无效',
                                key: 'today_invalid',
                                align: 'center',
                                width: 140,
                            },
                            {
                                title: '掉线骚扰',
                                key: 'today_disconnect',
                                align: 'center',
                                width: 140,
                            },
                            {
                                title: '未开口',
                                key: 'today_no_send',
                                align: 'center',
                                width: 140,
                            },
                            {
                                title: '留电量',
                                key: 'today_ld',
                                align: 'center',
                                width: 140,
                            },
                        ]
                    }
                ]
            };
        },
        mounted() {
            this.initial();
        },
        methods: {
            initial() {
                // this.askDataCondition()
                this.projectList = JSON.parse(localStorage.getItem('project'));
                // eslint-disable-next-line camelcase
                this.params.project_id = this.projectList[0] ? this.projectList[0].project_id : '';
            },
            changeSearch(){
                this.askData();
            },
            askData(){
                const params = {
                    project_id: this.params.project_id,
                    ip: this.params.ip
                };
                ipSearch(params).then(res => {
                    this.data = [res];
                });
            },
           
        }
    };
</script>